<template>
  <div class="kuang1">
    <el-row :gutter="20">
      <el-col :span="12" class="one">
        <div class="oneContent">
          <div class="onetitleTop">部队人员分布</div>
          <div
            class="onecontent2"
            id="main"
            style="width: 700px; height: 400px"
          ></div>
        </div>
      </el-col>
      <el-col :span="12" class="one">
        <div class="oneContent">
          <div class="onetitleTop" @click="handleJFZV('JFZC','经费支出详情')">经费支出</div>
          <div class="onecontent2">
            <div class="jfP1">
              <div>
                <div class="jfp1Title">收入款项</div>
                <div class="jfP1Number1">
                  <CountTo :startVal="0" :endVal="moneyTo.shouru" :duration="2000" separator=""></CountTo>
                万</div>
              </div>
              <div>
                <div class="jfp1Title">支出款项</div>
                <div class="jfP1Number2">
                  <CountTo :startVal="0" :endVal="moneyTo.zhichu" :duration="2000" separator=""></CountTo>万
                </div>
              </div>
              <div>
                <div class="jfp1Title">报销款项</div>
                <div class="jfP1Number3">
                  <CountTo :startVal="0" :endVal="moneyTo.baoxiao" :duration="2000" separator=""></CountTo>万
                </div>
              </div>
            </div>
            <div class="jfP2">
              <div class="jfP2Kuang">
                <div class="jfp2title">20万</div>
                <div class="jfp2text">东部战区</div>
              </div>
              <div class="jfP2Kuang">
                <div class="jfp2title">80万</div>
                <div class="jfp2text">西部战区</div>
              </div>
              <div class="jfP2Kuang">
                <div class="jfp2title">50万</div>
                <div class="jfp2text">南部战区</div>
              </div>
              <div class="jfP2Kuang">
                <div class="jfp2title">120万</div>
                <div class="jfp2text">北部战区</div>
              </div>
              <div class="jfP2Kuang">
                <div class="jfp2title">60万</div>
                <div class="jfp2text">中部战区</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="24" class="one">
        <div class="oneContent">
          <div class="onetitleTopChang">各月份支出情况</div>
          <div
            class="onecontent2"
            id="echart3"
            style="width: 1500px; height: 460px"
          ></div>
        </div>
      </el-col>
      <!-- <el-col :span="12" class="one">
        <div class="oneContent">
          <div class="onetitleTop">数据上报完整性</div>
          <div class="onecontent2" id="echart4" style="width: 700px; height: 450px ; margin-top:20px" ></div>
        </div>
      </el-col> -->
      <el-col :span="12" class="one">
        <div class="oneContent">
          <div class="onetitleTop">预警信息统计</div>
          <div class="onecontent2">
            <div class="table-kuang">
              <el-table
                :data="tableData"
                style="width: 100%"
                id="playList"
              >
                <el-table-column
                  prop="date"
                  label="日期"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="预警信息"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="预警类别">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12" class="one">
        <div class="oneContent">
          <div class="onetitleTop" @click="handleJFZV('FYZCTJ','费用支出统计详情')">费用支出统计</div>
          <div class="onecontent2">
            <div class="p1next6kuang">
              <div class="p1next6">
                <div class="p1next6NR">伙食费</div>
                <div class="p1next6NR">其他经费</div>
              </div>
              <div class="p1next6-1">
                <div class="p1next6NR-1">
                  <div class="p1next6NR-1-text">果蔬费用</div>
                  <div class="p1next6NR-1-num">30万</div>
                </div>
                <div class="p1next6NR-1">
                  <div class="p1next6NR-1-text">基层掌管经费</div>
                  <div class="p1next6NR-1-num">25万</div>
                </div>
              </div>
              <div class="p1next6-1">
                <div class="p1next6NR-1">
                  <div class="p1next6NR-1-text">肉类费用</div>
                  <div class="p1next6NR-1-num">10个</div>
                </div>
                <div class="p1next6NR-1">
                  <div class="p1next6NR-1-text">上级分配经费</div>
                  <div class="p1next6NR-1-num">8个</div>
                </div>
              </div>
              <div class="p1next6-1">
                <div class="p1next6NR-1">
                  <div class="p1next6NR-1-text">面食费用</div>
                  <div class="p1next6NR-1-num">10个</div>
                </div>
                <div class="p1next6NR-1">
                  <div class="p1next6NR-1-text">代理代报经费</div>
                  <div class="p1next6NR-1-num">8个</div>
                </div>
              </div>
            </div>
            
            
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%"
      :modal="false"
    >  
      <div>
        <JFZC v-if="dialogName == 'JFZC'"/> 
        <FYZCTJ v-if="dialogName == 'FYZCTJ'"/> 
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import CountTo from "vue-count-to";

export default {
  name: "Part1",
  components: {
    CountTo,
    // CommonAside: ()=> import('../components/CommonAside.vue'),
    JFZC: ()=> import('./components/JFZC.vue'),
    FYZCTJ: ()=> import('./components/FYZCTJ.vue'),
  },
  mounted() {
    this.aa();
    this.echart3();
    // this.echart4();
    // 去除el 表格hover
    window.addEventListener('click', this.closeBarcode)
    if(document.getElementById("playList")){
      this.timer  =  setInterval(() => {
        // （也可以使用`this.$ref`获得表格元素让母后`.classList.remove("el-table--enable-row-hover")`）
        document.getElementById("playList").classList.remove("el-table--enable-row-hover")
      })
    }
    
  },
  destroyed() {
    window.removeEventListener('click', this.closeBarcode)
    if(this.timer) { //如果定时器在运行则关闭
        clearInterval(this.timer);
    }
  },
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '就餐人数预警',
          address: '一类预警'
        }, {
          date: '2016-05-04',
          name: '早餐预警',
          address: '二类预警'
        }, {
          date: '2016-05-01',
          name: '午餐预警',
          address: '三类预警'
        }, {
          date: '2016-05-03',
          name: '晚餐预警',
          address: '普通预警'
        },
        {
          date: '2016-05-03',
          name: '晚餐预警',
          address: '普通预警'
        },
      ],

      moneyTo:{
        shouru: 983,
        zhichu: 1582,
        baoxiao: 1331 
      },
      dialogVisible: false,
      dialogName: '',
      dialogTitle: '',
    };
  },

  watch:{
    moneyTo:{ //监听的对象
      handler:function(newV,oldV){
        console.log('watch中：',newV)
        setTimeout(()=>{
          this.moneyTo.zhichu = 2000
        },2000)
      },
      deep:true, //深度监听设置为 true
    }
  },

  methods: {
    // 第一个饼图
    aa() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));

      var data = [
        { value: 123, name: "东部战区" },
        { value: 12, name: "西部战区" },
        { value: 32, name: "南部战区" },
        { value: 100, name: "北部战区" },
        { value: 127, name: "中部战区" },
      ];
      var color = ["#146de0", "#f85f88", "#f0c412", "#f39858", "#a300fe"];

      // 绘制图表
      myChart.setOption({
        //你的代码

        // backgroundColor: '#081736',
        color: color,
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,0.5)",
          color: "#fff",
          formatter: function (params) {
            return (
              params.name +
              "<br/>" +
              params.marker +
              '<span style="color:' +
              params.color +
              '">' +
              params.data["name"] +
              "\n" +
              params.data["value"] +
              "</span>"
            );
          },
        },
        legend: {
          orient: "vertical",
          icon: "circle",
          left: "14.2%",
          top: "30%",
          itemWidth: 14,
          itemGap: 20,
          textStyle: {
            rich: {
              a: {
                color: "#fff",
                fontSize: 20,
                padding: [0, 10, 0, 0],
              },
              b: {
                color: "#1bfaf2",
                fontSize: 20,
                padding: [0, 10, 0, 10],
              },
            },
          },
          formatter: function (name) {
            var target, unit;
            for (var i = 0, l = data.length; i < l; i++) {
              if (data[i].name == name) {
                target = data[i].value;
                unit = data[i].unit;
              }
            }
            return `{a| ${name}}{b|${target}}`;
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["37%", "65%"],
            center: ["70%", "52%"],
            avoidLabelOverlap: true,
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{d}%",
                textStyle: {
                  align: "center",
                  baseline: "middle",
                  fontSize: 16,
                  fontWeight: "100",
                  color: "#fff",
                },
              },
            },
            labelLine: {
              show: false,
            },

            data: data,
          },
        ],
      });
    },
    // 第三个折线图
    echart3() {
      // 基于准备好的dom，初始化echarts实例
      var myChart2 = echarts.init(document.getElementById("echart3"));

      let xLabel = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ];
      let dataValue = [20, 30, 40, 35, 34, 15, 56, 15, 12, 25, 34, 42];
      let dataValue1 = [40, 35, 34, 15, 56, 15, 12, 25, 34, 42, 20, 30];

      // 绘制图表
      myChart2.setOption({
        //你的代码

        // backgroundColor: '#0c2d55',
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "rgb(126,199,255)",
            },
          },
        },
        legend: {
          show: true,
          top: "10%",
          itemWidth: 30, // 图例标记的图形宽度。
          //   itemGap: 20, // 图例每项之间的间隔。
          itemHeight: 10, //  图例标记的图形高度。
          textStyle: {
            color: "#fff",
            fontSize: 14,
            padding: [0, 8, 0, 8],
          },
        },
        grid: {
          top: "30%",
          left: "10%",
          right: "5%",
          bottom: "20%",
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "rgb(41,188,245)",
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#FFFFFF",
                fontSize: 12,
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#233653",
              },
            },
            axisTick: {
              show: false,
            },
            data: xLabel,
          },
        ],
        yAxis: [
          {
            name: "",
            nameTextStyle: {
              color: "#fff",
              fontSize: 12,
              padding: [0, 60, 0, 0],
            },
            // minInterval: 1,
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#1160a0",
                type: "dashed",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#008de7",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 14,
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "支出款数",
            type: "line",
            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
            smooth: true,
            lineStyle: {
              normal: {
                width: 3,
                color: "#00ffa2", // 线条颜色
              },
            },
            itemStyle: {
              normal: {
                color: "#00f0ff", //拐点颜色
                // borderColor: '#fff600',//拐点边框颜色
                // borderWidth: 13//拐点边框大小
                label: {
                  show: true, //开启显示
                  color: "#fff",
                  position: "top", //在上方显示
                  formatter: function (res) {
                    if (res.value) {
                      return res.value;
                    } else {
                      return 0;
                    }
                  },
                },
              },
            },
            symbolSize: 8, //设定实心点的大小
            areaStyle: {
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#00ffa230",
                    },
                    {
                      offset: 0.6,
                      color: "#00ffa220",
                    },
                    {
                      offset: 1,
                      color: "#00ffa210",
                    },
                  ],
                  false
                ),
              },
            },
            data: dataValue,
          },
          {
            name: "收入款数",
            type: "line",
            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
            smooth: true,
            lineStyle: {
              normal: {
                width: 3,
                color: "#ffba00", // 线条颜色
              },
            },
            itemStyle: {
              normal: {
                color: "#fff600", //拐点颜色
                // borderColor: '#fff600',//拐点边框颜色
                // borderWidth: 13//拐点边框大小
                label: {
                  show: true, //开启显示
                  color: "#fff",
                  position: "top", //在上方显示
                  formatter: function (res) {
                    if (res.value) {
                      return res.value;
                    } else {
                      return 0;
                    }
                  },
                },
              },
            },
            symbolSize: 8, //设定实心点的大小
            areaStyle: {
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#ffba0030",
                    },
                    {
                      offset: 0.6,
                      color: "#ffba0020",
                    },
                    {
                      offset: 1,
                      color: "#ffba0010",
                    },
                  ],
                  false
                ),
              },
            },
            data: dataValue1,
          },
        ],
      });
    },

    // echart4() {
    //   // 基于准备好的dom，初始化echarts实例
    //   var myChart2 = echarts.init(document.getElementById("echart4"));

    //   // 绘制图表
    //   myChart2.setOption({
    //     //你的代码

    //     // backgroundColor: "#0A2E5D",
    //     normal: {
    //       top: 200,
    //       left: 300,
    //       width: 500,
    //       height: 400,
    //       zIndex: 6,
    //       backgroundColor: "",
    //     },
    //     color: ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
    //     title: {
    //       show: true,
    //       text: "数据上报完整性",
    //       left: "40%",
    //       top: "1%",
    //       textStyle: {
    //         fontSize: 18,
    //         color: "#fff",
    //         fontStyle: "normal",
    //         fontWeight: "normal",
    //       },
    //     },
    //     tooltip: {
    //       show: true,
    //       trigger: "item",
    //     },
    //     legend: {
    //       show: true,
    //       icon: "circle",
    //       left: "35%",
    //       top: "90%",
    //       orient: "horizontal",
    //       textStyle: {
    //         fontSize: 14,
    //         color: "#fff",
    //       },
    //       data: ["北部战区", "南部战区"],
    //     },
    //     radar: {
    //       center: ["50%", "50%"],
    //       radius: "70%",
    //       startAngle: 90,
    //       splitNumber: 4,
    //       shape: "circle",
    //       splitArea: {
    //         areaStyle: {
    //           color: ["transparent"],
    //         },
    //       },
    //       axisLabel: {
    //         show: false,
    //         fontSize: 18,
    //         color: "#fff",
    //         fontStyle: "normal",
    //         fontWeight: "normal",
    //       },
    //       axisLine: {
    //         show: true,
    //         lineStyle: {
    //           color: "white", //
    //         },
    //       },
    //       splitLine: {
    //         show: true,
    //         lineStyle: {
    //           color: "white", //
    //         },
    //       },
    //       indicator: [
    //         {
    //           name: "半天的完成度",
    //           max: 88,
    //         },
    //         {
    //           name: "全天的完成度",
    //           max: 88,
    //         },
    //         {
    //           name: "半周的完成度",
    //           max: 88,
    //         },
    //         {
    //           name: "一周的完成度",
    //           max: 88,
    //         },
    //         {
    //           name: "一个月的完成度",
    //           max: 88,
    //         },
    //         {
    //           name: "一个季度的完成度",
    //           max: 88,
    //         },
    //         {
    //           name: "半年的完成度",
    //           max: 88,
    //         },
    //         {
    //           name: "一年的完成度",
    //           max: 88,
    //         },
    //       ],
    //     },
    //     series: [
    //       {
    //         name: "北部战区",
    //         type: "radar",
    //         symbol: "circle",
    //         symbolSize: 10,
    //         areaStyle: {
    //           normal: {
    //             color: "rgba(245, 166, 35, 0.4)",
    //           },
    //         },
    //         itemStyle: {
    //           color: "rgba(245, 166, 35, 1)",
    //           borderColor: "rgba(245, 166, 35, 0.3)",
    //           borderWidth: 10,
    //         },
    //         lineStyle: {
    //           normal: {
    //             type: "dashed",

    //             color: "rgba(245, 166, 35, 1)",
    //             width: 2,
    //           },
    //         },
    //         data: [[80, 50, 55, 80, 50, 80, 48, 43]],
    //       },
    //       {
    //         name: "南部战区",
    //         type: "radar",
    //         symbol: "circle",
    //         symbolSize: 10,
    //         itemStyle: {
    //           normal: {
    //             color: "rgba(19, 173, 255, 1)",
    //             borderColor: "rgba(19, 173, 255, 0.4)",
    //             borderWidth: 10,
    //           },
    //         },
    //         areaStyle: {
    //           normal: {
    //             color: "rgba(19, 173, 255, 0.5)",
    //           },
    //         },
    //         lineStyle: {
    //           normal: {
    //             color: "rgba(19, 173, 255, 1)",
    //             width: 2,
    //             type: "dashed",
    //           },
    //         },
    //         data: [[60, 60, 65, 60, 70, 40, 80, 63]],
    //       },
    //     ],
        
    //   });
    // },

    handleJFZV(name,title){
      console.log(12313123)
      this.dialogVisible = true,
      this.dialogName = name,
      this.dialogTitle  = title
    },

    handleClose(done) {
      done();
    }



  },
};
</script>

<style lang="less" scoped>
.kuang1 {
  // flex-wrap: wrap;
}
.el-col {
  height: 495px;
}
.one {
  .oneContent {
    padding: 0px 30px 20px 85px;
    .onetitleTop {
      padding: 0 0 0 30px;
      color: white;
      font-size: 30px;
      background-image: url("@/assets/images/top2.1.png");
      background-size: cover;
      cursor:pointer;
    }
    .onetitleTopChang {
      padding: 0 0 0 30px;
      color: white;
      font-size: 30px;
      background-image: url("@/assets/images/lshx2.png");
      // background-size: cover;
      background-repeat: no-repeat;
    }
    .onecontent2 {
      color: white;
      // position: relative;
    }
  }
}

.jfP1 {
  margin: 70px 30px 0 30px;
  display: flex;
  justify-content: space-around;
  .jfp1Title {
    font-size: 20px;
  }
  .jfP1Number1 {
    font-size: 44px;
    color: #52ffff;
  }
  .jfP1Number2 {
    font-size: 44px;
    color: #28b1ff;
  }
  .jfP1Number3 {
    font-size: 44px;
    color: #f53f8c;
  }
}
.jfP2 {
  margin: 60px 30px 0 30px;
  display: flex;
  justify-content: space-around;
  .jfP2Kuang {
    padding: 35px 0;
    border: 1px solid #276a90;
    width: 100px;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .jfp2title {
      font-size: 21px;
      color: #e4e4e4;
    }
    .jfp2text {
      font-size: 20px;
      color: #c4c4c4;
    }
  }
}


/deep/ .table-kuang{
  margin: 60px 0 0 15px;
  color: white;
}
/*最外层透明*/
/deep/ .el-table, /deep/ .el-table__expanded-cell{
  background-color: transparent;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
}
/* 删除表格下最底层的横线 */
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
/deep/ .el-table thead {
  color: #ffffff;
  font-weight: 500;
}
.el-table{
  color: rgb(255, 255, 255);
}

.p1next6kuang{
  margin: 30px 0 0px 0 ;
}
.p1next6{
  display: flex;
  justify-content: space-around;
  margin: 0 0 30px 0 ;
  .p1next6NR{
    font-size: 20px;
    width: 320px;
    height: 68px;
    background-image:url('@/assets/images/lanseBtn1.png');
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.p1next6-1{
  display: flex;
  justify-content: space-around;
  margin: 15px 0 0 0;
  .p1next6NR-1{
    padding: 0 20px 0 0px;
    width: 286px;
    height: 58px;
    background-image:url('@/assets/images/lanseBtn2.png');
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .p1next6NR-1-text{
      font-size: 20px;
    }
    .p1next6NR-1-num{
      font-size: 20px;
      color: #f7ec41;
    }
  }
}


.el-dialog__title{
  font-size: 50px;
}
.tableClsaa{
  color: black;
  font-size: 20px;
  
}
/deep/ .el-dialog__title{
  font-size: 28px;
}
/deep/ .el-dialog__headerbtn{
  font-size: 40px;
}

</style>
